<template>
  <div>
    <div class="box">
      <!-- 导航按钮 -->
      <navs></navs>

      <!-- 歌手列表 -->
      <van-index-bar :index-list="leftList">
        <div v-for="(item, index) in rightList" :key="index">
          <!-- 索引标题 -->
          <van-index-anchor :index="item.name" />
          <van-cell v-for="value in item.data" :key="value.id">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <!-- <div class="van-cell-title"> -->
                 <router-link tag="div" :to="'/singer/artists?id=' + value.id" class="van-cell-title">
                <img width="45" height="45" :src="value.img1v1Url" />
                <span class="custom-title">{{ value.name }}</span>
                 </router-link>
              <!-- </div> -->
            </template>
          </van-cell>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { getArtistlist } from "../api/singer";
import navs from "../components/base/navs.vue";
export default {
  components: { navs },
  data() {
    return {
      leftList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"],
      rightList: [],
    };
  },
  methods: {
    ArtistlistFun() {
      for (let i = 0; i < this.leftList.length; i++) {
        this.rightList.push({
          name: this.leftList[i],
        });
      }
    },
  },
 async created() {
    this.ArtistlistFun(); //构建对象

    for (let i = 0; i < this.leftList.length; i++) {
   await getArtistlist({
        type: 1, // 歌手类型
        area: 96, // 歌手地区
        initial: this.leftList[i], //返回数量 , 默认为 30
      }).then((data) => {
        console.log(data);

        let index = this.rightList.findIndex(
          (item) => item.name == this.leftList[i]
        );
        // Vue.set( target, propertyName/index, value )
        //   向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
        // this.rightList[index].data = data.artists; //不合理写法
        this.$set(this.rightList[index], "data", data.artists);

        console.log(this.rightList);
      });
    }
    // this.$emit("get-style");
  },
};
</script>

<style lang="less">
.box{
  padding-bottom: 100px;
.van-cell-title {
  display: flex;
  align-items: center;
  span {
    margin-left: 20px;
  }
}
.van-index-anchor {
  background-color: #d9dadb;
}}
</style>